<template>
  <NuxtLayout name="list">
    <Head>
      <Title>News - 国内领先的企业智能信息化IT解决方案提供商</Title>
      <Meta name="description" content="管理页面" />
    </Head>
    <template #sidebar>
      <NewsSideBarCategory :data="state.category" />
    </template>
    <div class="app-view">
      <NewsList v-loading="loading" :data="state.list" />
      <div class="app-page flex justify-between">
        <div />
        <el-pagination v-model:page-size="limit" :current-page="state.queryParams.page" background layout="total, prev, pager, next, jumper" :total="total" @current-change="onCurrentChange" />
      </div>
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
import { useCategory } from '~/api'
import { BasePagination } from '~~/config'

const { page, limit } = BasePagination
const total = ref(0)
const loading = ref(true)
const route = useRoute()
const router = useRouter()
const { path, query } = route
const state = reactive<any>({
  category: [],
  list: {},
  // 查询对象
  queryParams: {
    title: '',
    page,
    limit,
  },
})

// 设置参数
const setQueryParams = () => {
  if (query?.page) {
    Object.assign(state.queryParams, { page: +query.page })
  }
}

// 初始化调用
const init = () => {
  setQueryParams()
}

init()

// 获取文章
const getCategory = async () => {
  const { data: res }: any = await useAsyncData(`use_Category`, () => useCategory())

  const rows = res.value.data?.rows
  const current = rows.find((item: any) => item.model === 'News' && !item.colPid)

  state.category = current ? rows.filter((item: any) => item.colPid === current.id) : []

  getIndexArticle()
}

getCategory()

// 获取文章
const getIndexArticle = async () => {
  const { data: res }: any = await useAsyncData(`use_IndexArticle`, () => useIndexArticle({ type: 'latest', modelid: state.category[0].modelid, ...query, ...state.queryParams }))
  const data = res.value.data

  state.list.rows = data.rows
  total.value = data.total
  loading.value = false
}

// 处理翻页
const onCurrentChange = (page: number) => {
  state.queryParams.page = page

  getIndexArticle()
  router.push({ path, query: { ...query, ...state.queryParams } })
}
</script>
<style></style>
